<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
			float: right;	
				margin-right: 50px;/*图片与文字连接处间隙*/
				margin-bottom: 50px;/*图片与文字连接处间隙*/
			}
			p{
				font-size: 16px;  /*页面默认字体尺寸*/
				line-height: 20px; /*浮动字体，行高无法设定*/
				word-spacing: 20px;
			}
			
		</style>
	</head>
	<body>
		<h1>浮动场景1：图片与文字环绕</h1>
		<img src="img/1.png" alt="蔡徐坤" width="240px" height="240px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, vero qui delectus aliquam a laboriosam consequuntur ipsum modi necessitatibus adipisci veritatis rerum magnam, obcaecati iste nam iusto quo ea <natus class="lorem">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint nihil fugiat atque mollitia saepe amet eius nemo, iusto ut expedita dolore aspernatur quam labore vitae accusantium, molestiae possimus enim. <Porro class="lorem"></Porro></natus></p>
	</body>
</html>